<template>
    <!-- 收货地址列表 -->
    <view>
        <view class="czjz y dizhiliebiao">
            <view v-for="item in from" class="dizhi zxfx">
                <view class="x">
                    <view style="width: 80%;">
                        <view class="xinxi">
                            <span>{{item.name}}</span><!-- 姓名 -->
                            <span>{{item.tel}}</span><!-- 电话号码 -->
                        </view>
                        <view class="dz">
                            <span>{{item.province}}</span> <!-- 省 -->
                            <span>{{item.city}}</span> <!-- 市 -->
                            <span>{{item.county}}</span> <!-- 区 -->
                            <span>{{item.addressDetail}}</span><!-- 详细地址 -->
                        </view>
                    </view>
                    <view class="x spcz" style="width: 20%;">
                        <p @click="bianji(item)">编辑</p>
                    </view>
                </view>
            </view>
            <p style="padding-top: 50rpx;color: #8f8f8f;">-没有更多了-</p>
        </view>
        <view class="xinzeng spcz">
            <view class="anniu spcz" @click="xinzeng">
                <p>新增地址</p>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                from: {}
            }
        },
        onShow() {
            this.$api.get('/wx/address/list', this.from).then(res => {
                // console.log(res)
                this.from = res.data.data.list
            })
        },
        methods: {
            xinzeng() {
                uni.navigateTo({
                    url: "/pages/shohuodizhi/bianjidizhi"
                })
            },
            // 编辑/修改
            bianji(item) {
                uni.navigateTo({
                    //一、encodeURIComponent 为uniapp提供的api 传递item对象
                    //二、传递数据 (数组、对象) 必须使用 JSON.stringify 将其转换为 JSON 字符串
                    // 接收也必须使用 JSON.parse 来进行解析
                    url: `/pages/shohuodizhi/bianjidizhi?item=${encodeURIComponent(JSON.stringify(item))}`
                })
            }
        },
    }
</script>

<style>
    html {
        background: #f1f1f1;
    }

    .dz {
        font-size: 28rpx;
    }

    .dz span {
        padding-left: 15rpx;
    }

    .dizhi {
        width: 92%;
        background: #ffffff;
        margin-top: 50rpx;
        border-radius: 30rpx;
        /* padding-left: 50rpx; */
        padding: 30rpx;
    }


    .xinzeng {
        width: 100%;
        height: 150rpx;
        position: fixed;
        bottom: 0;
        background: #ffffff;
    }

    .anniu {
        width: 92%;
        height: 100rpx;
        background: #ff5500;
        margin: auto;
        border-radius: 100rpx;
        color: #ffffff;
    }

    .dizhiliebiao {
        padding-bottom: 25%;
    }

    .xinxi {
        height: 50rpx;
    }

    .xinxi span {
        padding-left: 15rpx;
    }
</style>